//引入node内置模块,处理文件路径
const path = require("path")
//引入处理html的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//把css从js中提取出来
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//压缩css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
//入口,配置多个写对象
module.exports = {
    entry: {
        //公共的配置写在前面
        commonCss: "./src/css/common/commonCss.js",
        //封装dom操作
        dom: "/src/js/common/dom.js",
        //可复用的工具函数
        utils: "/src/js/common/utils.js",
        //页面写在后面
        advertising: "./src/js/advertising.js",
        login: "./src/js/login.js",
        register: "./src/js/register.js",
        index: "./src/js/index.js",
        sports: "./src/js/sports.js",
        min: "./src/js/min.js",

    },

    //输出文件的路径,绝对路径
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/[name]-[hash:5].js",
    },

    //插件
    plugins: [
        //配置html
        //广告页
        new HtmlWebpackPlugin({
            template: "./src/advertising.html",
            filename: "advertising.html",//输出文件的名字
            //配置依赖的模块
            chunks: ["advertising","commonCss","dom","utils"]
        }),
        //注册页
        new HtmlWebpackPlugin({
            template: "./src/login.html",
            filename: "login.html",//输出文件的名字
            //配置依赖的模块
            chunks: ["login","commonCss","dom","utils"]
        }),
        //登录页
        new HtmlWebpackPlugin({
            template: "./src/register.html",
            filename: "register.html",//输出文件的名字
            //配置依赖的模块
            chunks: ["register","commonCss","dom","utils"]
        }),
        //首页
        new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",//输出文件的名字
            //配置依赖的模块
            chunks: ["index", "commonCss", "dom", "utils"]
        }),
         //运动页面
         new HtmlWebpackPlugin({
            template: "./src/sports.html",
            filename: "sports.html",//输出文件的名字
            //配置依赖的模块
            chunks: ["sports", "commonCss", "dom", "utils"]
        }),
         //我的页面
         new HtmlWebpackPlugin({
            template: "./src/min.html",
            filename: "min.html",//输出文件的名字
            //配置依赖的模块
            chunks: ["min", "commonCss", "dom", "utils"]
        }),
        
        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name]-[hash:5].css' // 重命名输出的css
        }),
        new OptimizeCssAssetsWebpackPlugin() // 压缩css
    ],

    // mode:"production",//生产模式
    mode: "development",//开发模式

    //加载器loader
    module: {
        rules: [
            {
                test: /\.css$/,//匹配所有的css文件
                use: [
                    // "style-loader",//在head中创建一个style标签,把下面转的字符串放进来
                    // MiniCssExtractPlugin.loader,
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"//css中查找静态资源(图片)的路径
                        }
                    },
                    "css-loader", "postcss-loader"//把css文件内容转为字符串
                ]
            },

            {
                test: /\.less$/,//匹配所有的css文件
                use: [
                    // "style-loader",//在head中创建一个style标签,把下面转的字符串放进来
                    // MiniCssExtractPlugin.loader,
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"
                        }
                    },
                    "css-loader",//把css文件内容转为字符串
                    "postcss-loader",
                    "less-loader",//把less编译为css文件

                ]
            },

            {
                test: /\.(jpg|jpeg|gif|png)$/,//匹配所有的css文件
                loader: "url-loader",
                options: {
                    //限制图片名字,格式为原来的格式
                    name: "[hash:6].[ext]",
                    //限制图片大小,如果小于10kb就进行base64转码
                    limit: 10 * 1024,
                    //es6模块化冲突
                    esModule: false,
                    outputPath: "img",
                }
            },
            {
                test: /\.html$/,//匹配所有的css文件
                loader: "html-loader"
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,  // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:6].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',    // loader 编译es6为es5
                exclude: /node_modules/  // 排除
            }
        ]
    },

    //本地开发服务器  会把项目打包到内存中,我们看不到
    devServer: {
        contentBase:path.resolve(__dirname,'dist'), // 启动服务器目录
        compress: true, // 启动gzip压缩
        port: 666,  // 端口
        open: true,// 自动打开浏览器
        // publicPath:"/",
        openPage:"./advertising.html"
    },
}